<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>淘彩</title>
    <link href="css/mui.css" rel="stylesheet" />
    <link href="css/ydui.rem.css" rel="stylesheet" />
    <link href="css/user.css" rel="stylesheet" />

    <style type="text/css">
        .historyHideIn .userChargeCount ul li.active a {
            background: #f94535;
            color: #fff;
            border: 1px solid #f94535;
        }

        .historyHideIn .userChargeCount ul li a {
            background: #f2f2f2;
            color: #333;
            font-size: 14px;
            width: 100%;
            height: 100%;
            display: block;
            padding: 5px 0;
            border: 1px solid #ddd;
        }

        .userWithdrawalList li {
            position: relative;
        }

        .bankList_lTxt a {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
        }

        .bankList_lTxt a i {
            margin-right: 5px;
            font-size: 14px;
            color: #989898;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-nav header">
            <a href="user_list.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h2 class="mui-title">资金明细</h2>
        </header>
        <div class="historyHide">
            <div class="historyHideBg"></div>
            <div class="historyHideIn">
                <div class="userChargeCount">
                    <ul>
                        <li class="active">
                            <a href="javascript:void(0);" @click="getFinanceRecord('RECHARGE')">全部</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('RECHARGE')">充值</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('DEPOSIT')">提现</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('CONSUME')">购彩</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('CLOSE')">结算</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('EXPIRY')">兑奖</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('OTTERYREBATE')">订单返利</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" @click="getFinanceRecord('REFUNDSUCCESS')">返款</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="pullrefresh" class="mui-content" style="background: #f2f2f2;">

            <yd-pullrefresh :callback="loadDownList" ref="pullrefreshDemo">
                <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
                    <yd-list theme="1" slot="list">
                        <div class="userWithdrawal">
                            <div class="userWithdrawalSec">
                                <div class="userWithdrawalList">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell" v-for="item of list">
                                            <div class="bankList">
                                                <div class="bankList_l">
                                                    <div class="bankList_lTxt">
                                                        <h5 v-if="item.rechargetype=='RECHARGE'">充值</h5>
                                                        <h5 v-else-if="item.rechargetype=='CLOSE'">结算</h5>
                                                        <h5 v-else-if="item.rechargetype=='CONSUME'">消耗</h5>
                                                        <h5 v-else-if="item.rechargetype=='DEPOSIT' && item.status === 'INCOME'">提现</h5>
                                                        <h5 v-else-if="item.rechargetype=='DEPOSIT' && item.status === 'EXPENDITURE'">提现
                                                            <a :href="'txdat.html?cid='+item.id">
                                                                <i class="mui-icon mui-icon-arrowright"></i>
                                                            </a>
                                                        </h5>
                                                        <h5 v-else-if="item.rechargetype=='EXPIRY'">兑奖</h5>
                                                        <h5 v-else-if="item.rechargetype=='OTTERYREBATE'">收益</h5>
                                                        <h5 v-else-if="item.rechargetype=='REFUNDSUCCESS'">退彩金</h5>
                                                        <h5 v-else-if="item.rechargetype=='EXCHANGE'">兑换</h5>
                                                        <h5 v-else-if="item.rechargetype=='GIFTBEAN'">彩豆赠送</h5>
                                                        <span>{{item.dealTime}}</span>
                                                    </div>
                                                </div>
                                                <div class="bankList_r">
                                                    <div class="bankList_lTxt">
                                                        <h5 class="co_ld" v-if="item.status === 'INCOME'">+{{item.amount}}</h5>
                                                        <h5 class="co_rd" v-if="item.status === 'EXPENDITURE'">-{{item.amount}}</h5>
                                                        <p>编号：{{item.rechargeNo}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </yd-list>

                    <!-- 数据全部加载完毕显示 -->
                    <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

                    <!-- 加载中提示，不指定，将显示默认加载中图标 -->
                    <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />

                </yd-infinitescroll>

            </yd-pullrefresh>
        </div>
    </div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ydui.rem.js"></script>

<script type="text/javascript">
    'use strict'

    $(document).ready(function () {
        new Vue({
            el: '#app',
            data: {
                list: [],
                page: 0,
                size: 5,
            },
            mounted: function () {
                this.getFinanceRecord('')
            },
            methods: {
                /**
                 *  获取资金明细
                 */
                getFinanceRecord: function (rechargetype) {
                    $('.userChargeCount > ul').find('li').each(function () {
                        $(this).click(function () {
                            $('.userChargeCount > ul li').removeClass("active")
                            $(this).addClass("active")
                        })
                    })
                    setTimeout(function () {
                        $(".historyHide").removeClass("active")
                    }, 200)

                    let that = this,
                        url = 'biz/api/financeRecord?flag=2&page=' + that.page + '&size=20',

                        getFinanceRecordSuc = (data) => {
                            if (data.code == 1001) {
                                mui.alert('暂无明细', '提示', function () {
                                    window.location = 'user.html'
                                })
                            }
                            that.list = data.data.content
                            console.log(that.list)
                        },

                        getFinanceRecordErr = (err) => {
                            console.log(err)
                        }

                    common.ajax(url, '', getFinanceRecordSuc, getFinanceRecordErr, 'GET')
                },
                loadList() {
                    let that = this,
                        url = 'biz/api/financeRecord?flag=2&page=' + that.page + '&size=' + that.size,

                        loadListFn = (data) => {
                            const _list = data.data.content;
                            console.log(_list)
                            that.list = [...that.list, ..._list];

                            if (_list.length < that.page || that.page == 3) {
                                /* 所有数据加载完毕 */
                                that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                                return;
                            }
                            /* 单次请求数据完毕 */
                            that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                            that.page++;
                        }
                    common.ajax(url, '', loadListFn, '', 'GET')
                },
                loadDownList() {
                    let that = this,
                        url = 'biz/api/financeRecord?flag=2&page=0&size=20',
                        loadDownList = (data) => {
                            that.list = data.data.content
                            console.log(that.list)
                            that.page = 0,

                                that.$dialog.toast({
                                    mes: '刷新完成'
                                });
                            that.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
                            that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
                        }
                    common.ajax(url, '', loadDownList, '', 'GET')
                }
            }
        })
        mui('body').on('tap', 'a', function () { if (this.href) { document.location.href = this.href } })

        mui("header").on("tap", "#back", function () {
            history.back()
        })

        mui("header").on("tap", "#menuRightBtn", function () {
            $(".historyHide").toggleClass("active")
        })
        mui(".historyHide").on("tap", ".historyHideBg", function () {
            $(".historyHide").removeClass("active")
        })

    })
</script>

</html>